<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>api</title>

    <script src="webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>


    <script src="/webjars/vue/2.1.3/vue.js"></script>
</head>
<body>

<div class="container"  id="apiApp" style="margin: 10px auto;">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <form role="form">
                <div class="form-group">
                    <label for="">url</label>
                    <input type="text" class="form-control"
                           v-model="api.url"
                    />
                </div>
            </form>
        </div>
    </div>


    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="tabbable" id="tabs-828112">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#panel-973462" data-toggle="tab">普通方式</a>
                    </li>
                    <li>
                        <a href="#panel-311278" data-toggle="tab">requestBody方式</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="panel-973462">
                        <form role="form">
                            <div class="form-group">
                                <label for="">请求方式</label>
                                <div>
                                    <template v-for="item in api.restTypeArr">
                                        <label class="radio-inline">
                                            <input type="radio" name="optionsRadiosinline" id="optionsRadios3" v-bind:value="item" v-model="api.restType"> {{item}}
                                        </label>

                                    </template>

                                </div>
                            </div>

                            <div class="form-group">
                                <label for="">urlParam</label>

                                <textarea class="form-control"
                                          rows="10"
                                          v-model="api.urlParam">


                                </textarea>
                            </div>


                            <div class="form-group">

                                <button type="button" @click="testApi"  class="btn btn-default">test</button>
                            </div>

                        </form>
                    </div>








                    <div class="tab-pane" id="panel-311278">



                        <form role="form">


                            <div class="form-group">
                                <!--<label for="">bodyParam</label>-->

                                <label for="">post</label>

                                <textarea class="form-control"
                                          rows="10"
                                          v-model="api.bodyParam">

                                </textarea>
                            </div>


                            <div class="form-group">

                                <button type="button" @click="testApiRequestBody"  class="btn btn-default">test</button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <div class="row clearfix">
        <h2>result:</h2>
        <div class="col-md-12 column">
            <form role="form">
                <div class="form-group">
                    <label for="">result</label>

                    <textarea class="form-control"
                              rows="10"
                              v-model="api.serverData">

                                </textarea>
                </div>
            </form>
        </div>
    </div>
</div>


</body>
</html>


<script>

    var vm = new Vue({
        el: '#apiApp',
        data: {


            api:{

                restTypeArr:['POST','GET'],
                restType:'GET',
                requestBodyFlag:false,
                url:'http://localhost:9000/',
                urlParam:{"age":10,
                           "name":"zhou"
                         },
                bodyParam:{"sid":"100017099",
                            "money":1000
                          },
                serverData:"",

            }



        },
        methods: {

            testApi:function () {

                var _self = this;

                var urlParam = this.api.urlParam;
                var options={

                    url: this.api.url,
                    data: urlParam,
                    type: this.api.restType,
                    datType: "JSON",
//                    contentType: "application/json"
                };

//                if(urlParam){
//
//                    options.data= JSON.stringify(urlParam);
//                }

//                if(this.api.requestBodyFlag === 'yes'){
//
//                    options.contentType = "application/json";
//                }


//                console.log(options);

                $.ajax(options).done(
                    function (dat) {

                        console.log(dat);
                        _self.api.serverData=dat;
                    }
                );

            },

            testApiRequestBody:function () {


                var _self = this;


                var urlParam = this.api.urlParam;
                var bodyParam = this.api.bodyParam;

                for(var i in bodyParam){
                    console.log(null,i,bodyParam[i]);
                }
                var data = JSON.stringify(bodyParam).replace('\r','').replace('\n','');
                console.log(data);
                var options={

                    url: this.api.url,
                    data: data,
                    type: 'post',
                    datType: "JSON",
                    contentType: "application/json;charset=UTF-8"
                };

                $.ajax(options).done(
                    function (dat) {

                        console.log(dat);
                        _self.api.serverData=dat;
                    }
                );

            },


        },
        mounted: function () {

        }
    });

</script>